<template>
  <div id="app">
    <div>
      <h2 class="h1 hero-title" style="margin-top: 20px;margin-bottom: 20px">
        <strong><i class="el-icon-s-ticket"></i>我的卡券</strong>
      </h2>
    </div>
    <el-card>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="可使用" name="first">
        <el-row w>
          <el-col :span="5" v-for="item in couponList" :value="item">
            <el-card class="box-card coupon-card"  v-if="item.useStatus==0">
              <div class="coupon-card-body" :style="{
      backgroundColor: options.cardColor,
    }">
                <div class="price-group">
                <span class="coupon-card-unit">¥</span>
                <span class="coupon-card-price">{{item.amount}}</span>
                </div>
                <span class="coupon-card-description">
                  满{{item.minPoint}}可用
                </span>
                <br>
                <span class="coupon-card-time">{{item.startTime}}-{{item.endTime}}</span>
              </div>
              <div class="distance">
                <small>券名称 : </small><small class="color">{{item.name}}</small>
                <div><small>限平台 : </small>
                  <small v-if="item.platform==0"  class="color">全部平台</small>
                  <small v-if="item.platform==1"  class="color">移动平台</small>
                  <small v-if="item.platform==2"  class="color">PC平台</small>
                </div>
              </div>
              <el-button round plain style="display:block;margin:0 auto" size="100" type="primary" @click="useCoupon">立即使用</el-button>
            </el-card >
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="已使用" name="second">
        <el-row w>
          <el-col :span="5" v-for="item in couponList" :value="item">
            <el-card class="box-card" v-if="item.useStatus==1">
              <div class="coupon-card-body" :style="{
      backgroundColor: options.cardColor1,
    }">
                <div class="price-group">
                  <span class="coupon-card-unit">¥</span>
                  <span class="coupon-card-price">{{item.amount}}</span>
                </div>
                <span class="coupon-card-description">
                  满{{item.minPoint}}可用
                </span>
                <br>
                <span class="coupon-card-time">{{item.startTime}}-{{item.endTime}}</span>
              </div>
              <div class="distance">
                <small>券名称 : </small><small class="color">{{item.name}}</small>
              <div><small>限平台 : </small>
                <small v-if="item.platform==0" class="color">
            全部平台
          </small>
                <small v-if="item.platform==1" class="color">
            移动平台
          </small>
                <small v-if="item.platform==2" class="color">
            PC平台
          </small>
              </div>
              </div>
              <el-button round plain style="display:block;margin:0 auto" size="100" type="info" @click="handleDetail(item.couponId)">查看详情</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="已过期" name="third">
        <el-row w>
          <el-col :span="5" v-for="item in couponList" :value="item">
            <el-card class="box-card" v-if="item.useStatus==2">
              <div class="coupon-card-body" :style="{
      backgroundColor: options.cardColor1,
    }">
                <div class="price-group">
                  <span class="coupon-card-unit">¥</span>
                  <span class="coupon-card-price">{{item.amount}}</span>
                </div>
                <span class="coupon-card-description">
                  满{{item.minPoint}}可用
                </span>
                <br>
                <span class="coupon-card-time">{{item.startTime}}-{{item.endTime}}</span>
              </div>
              <div class="distance">
                <small>券名称 : </small><small class="color">{{item.name}}</small>
                <div><small>限平台 : </small>
                <small v-if="item.platform==0" class="color">
            全部平台
          </small>
                <small v-if="item.platform==1" class="color">
            移动平台
          </small>
                <small v-if="item.platform==2"  class="color">
            PC平台
          </small>
              </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="可领取" name="fourth">
        <el-row w>
          <el-col :span="5" v-for="item in ableCoupon" :value="item">
            <el-card class="box-card">
              <div class="coupon-card-body" :style="{
      backgroundColor: options.cardColor2,
    }">
                <div class="price-group">
                  <span class="coupon-card-unit">¥</span>
                  <span class="coupon-card-price">{{item.amount}}</span>
                </div>
                <span class="coupon-card-description">
                  满{{item.minPoint}}可用
                </span>
                <br>
                <span class="coupon-card-time">{{item.startTime}}-{{item.endTime}}</span>
              </div>
              <div class="distance">
                <small>券名称 : </small><small class="color">{{item.name}}</small>
                <div><small>限平台 : </small>
                <small v-if="item.platform==0" class="color">
            全部平台
          </small>
                <small v-if="item.platform==1" class="color">
            移动平台
          </small>
                <small v-if="item.platform==2" class="color">
            PC平台
          </small>
              </div>
              </div>
              <el-button round plain style="display:block;margin:0 auto" size="100" type="danger" @click="handleReceive(item.id)">立即领取</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    </el-card>
    <el-dialog title="优惠券使用信息" :visible.sync="dialogFormVisible" width="40%">
      <el-form label-width="150px" size="small">
        <el-form-item label="优惠券码">
          <div>{{couponDetail.couponCode}}</div>
        </el-form-item>
        <el-form-item label="订单id">
          <div>{{couponDetail.orderId}}</div>
        </el-form-item>
        <el-form-item label="使用时间">
          <div>{{couponDetail.useTime}}</div>
        </el-form-item>
        <el-form-item label="订单号码">
          <div>{{couponDetail.orderSn}}</div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "Coupon",
  props: {
    options: {
      type: Object,
      default: () => ({
        cardColor: '#87CEFA',
        cardColor1:'#B0C4DE',
        cardColor2:'#FF6347',
        buttonColor: '#d22727',
      })
    }
  },
  data(){
    return {
      currentDate: new Date(),
      memberId:localStorage.getItem("id"),
      couponList:[],
      ableCoupon:[],
      dialogFormVisible:false,
      couponDetail:'',
      activeTab:'first',
      couponStatusUtil: {
        status: {
          0: 'got',
          1: 'used',
          2: 'expired'
        },
      },
      activeTab:'first',
    };
  },
  created() {
    this.load()
  },
  methods:{
    getButtonText(status) {
      if(status === 0) {
        return '领取'
      } else if(status === 1) {
        return '已领取'
      } else if(status === 2) {
        return '已过期'
      }
    },
    load(){
      //请求查询数据
      this.request.get("/couponhistories/getByMemberId/"+this.memberId,{
      }).then(res =>{
        console.log(res)
        this.couponList = res.data
      })
      this.request.get("/coupons/getAbleCoupon/"+this.memberId,{
      }).then(res=>{
        this.ableCoupon = res.data
      })
    },
    handleReceive(couponId){
      this.request.get("/couponhistories/receiveCoupon",{
        params:{
          memberId:this.memberId,
          couponId:couponId
        }
      }).then(res=>{
        this.$message.success("领取成功")
        this.load()
      })
    },
    handleDetail(couponId){
      this.request.get("/couponhistories/getByIds",{
        params:{
          memberId:this.memberId,
          couponId:couponId
        }
      }).then(res=>{
        this.couponDetail = res.data
        this.dialogFormVisible = true
      })
    },
    useCoupon(){
      this.$router.push('/front/home')
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.size{
  width: 290px;
}

html{
  height:100%;
}
body{
  height:100%;
  display:flex;
  margin:0;
}
.content {
  background: linear-gradient(#87CEEB,#E0FFFF);
}

.coupon-card {
  position: relative;
}

.coupon-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 290px;
  height: 250px;
  -webkit-mask:  radial-gradient(circle at 20px, transparent 20px, red 0) -20px;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.price-group {
  display: flex;
  justify-content: center;
}

.coupon-card-unit {
  font-size: 40px;
  color: #fff;
  margin-right: 10px;
}

.coupon-card-price {
  font-size: 70px;
  font-weight: 700;
  color: #fff;
}

.coupon-card-tail {
  font-size: 18px;
  align-self: flex-end;
  margin-left: 5px;
}

.coupon-card-description {
  color: #fff;
  font-size: 1.1em;
  margin-top: 10px;
}

.coupon-card-time {
  color: #070707ac;
  font-size: 1.2em;
  margin-top: 20px;
}

.color{
  color:#C0C0C0
}

.distance{
  margin-top:10px;
  margin-bottom:50px
}

.box-card1 {
  width: 480px;
}
</style>